<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">
      <div class="boxL">
        <div class="boxA">
          <div class="a">校园风光</div>
          <div class="b">XIAO YUAN FENG GUANG</div>
        </div>
        <div class="boxB">
          <img src="/fgt12.jpg" />
        </div>
      </div>
      <div class="boxR">
        <div class="boxC">
          <div class="boxD">
            <img src="/fgt11.jpg" />
          </div>
          <div class="boxE">
            <div class="c">学术研究</div>
            <div class="d">XUE SHU YAN JIU</div>
          </div>
          <div class="boxF">
            <img src="/1.jpg" />
          </div>
        </div>
        <div class="boxG">
          <div class="boxH">
            <div class="e">学生活动</div>
            <div class="f">XUE SHENG HUO DONG</div>
          </div>
          <div class="boxK">
            <img src="/fgt14.jpg" />
          </div>
          <div class="boxW">
            <img src="/fgt13.jpg" alt="" />
          </div>
        </div>
      </div>
    </div>
  </body>
  <style>
    .box {
      width: 800px;
      height: 200px;
      background-color: rgb(71, 18, 35);
      /* float: left; */
      margin: auto;
    }
    .boxL {
      width: 200px;
      height: 200px;
      background-color: rgb(0, 255, 174);
      float: left;
    }
    .boxR {
      width: 600px;
      height: 200px;
      background-color: rgb(255, 0, 0);
      float: left;
    }
    .boxA {
      width: 200px;
      height: 150px;
      background-color: rgb(255, 0, 76);
      box-sizing: border-box;
      float: left;
    }
    .a {
      padding: 30px 0 0 30px;
      font-size: 20px;
      color: aliceblue;
    }
    .b {
      padding: 20px 0 0 30px;
      font-size: 20px;
      color: aliceblue;
    }
    .boxB {
      width: 200px;
      height: 100px;
      background-color: rgb(193, 84, 175);
      float: left;
    }
    .boxB img {
      width: 200px;
      height: 100px;
      float: left;
    }
    .boxC {
      width: 600px;
      height: 125px;
      background-color: rgb(251, 255, 21);
      float: left;
    }
    .boxG {
      width: 600px;
      height: 125px;
      background-color: rgb(64, 0, 255);
      float: left;
    }
    .boxD {
      width: 350px;
      height: 125px;
      background-color: rgb(98, 26, 26);
      float: left;
    }
    .boxD img {
      width: 350px;
      height: 125px;
      float: left;
    }
    .boxE {
      width: 100px;
      height: 125px;
      background-color: rgb(0, 162, 244);
      float: left;
    }
    .c {
      padding: 20px 0 0 50px;
      font-size: 15px;
      color: aliceblue;
      writing-mode: vertical-rl;
    }
    .d {
      padding: 0 0 0 10px;
      font-size: 5px;
      writing-mode: vertical-rl;
      color: aliceblue;
    }
    .boxF {
      width: 150px;
      height: 125px;
      background-color: rgb(75, 19, 87);
      float: left;
    }
    .boxF img {
      width: 150px;
      height: 125px;
      float: left;
    }
    .boxH {
      width: 200px;
      height: 125px;
      background-color: rgb(208, 0, 255);
      float: left;
    }
    .e {
      padding: 30px 0 0 30px;
      font-size: 20px;
      color: aliceblue;
    }
    .f {
      padding: 10px 0 0 30px;
      font-size: 20px;
      color: aliceblue;
    }
    .boxK {
      width: 200px;
      height: 125px;
      background-color: rgb(98, 210, 227);
      float: left;
    }
    .boxK img {
      width: 200px;
      height: 125px;
      float: left;
    }
    .boxW {
      width: 200px;
      height: 125px;
      background-color: rgb(228, 244, 110);
      float: left;
    }
    .boxW img {
      width: 200px;
      height: 125px;
      float: left;
    }
  </style>
</html>
